import React from 'react';

import { useCinemaList } from '../hooks/useCiname';
import { useNavigate } from 'react-router-dom';

interface IProps {}

const Cinema: React.FC<IProps> = (props) => {
  const { list, cityName } = useCinemaList();
  const navigate = useNavigate();

  return (
    <div>
      <div>
        <div
          onClick={() => {
            navigate('/city');
          }}
        >
          {cityName}
        </div>
      </div>
      <ul>
        {list.map((item: any) => (
          <li key={item.cinemaId}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default Cinema;
